<template>
  <div ref="dom" class="dl-menuwrapper" @click="myClick">
    <slot></slot> 
    <xui-menu v-if="show" :isShow="show" :x="x" :y="y" @leave="myEvent">
        <slot name="menu"></slot>
    </xui-menu>
  </div>
</template>
<script lang="ts">
import XuiMenu from './menus/menu.vue'
import useClickOutSite from '/@/components/hooks/useClickOutSide'
import { ref, watch } from 'vue'
export default {
    components: { XuiMenu },   
    setup(props, {slots}) {        
        let x = ref(0)
        let y = ref(0)
        let dom = ref()
        let show = ref(false)
        const isOutSiteClick = useClickOutSite(dom)
        watch(isOutSiteClick, v => {            
            if (v && show.value) {
                show.value = false
            }
        })
        return {
            dom,            
            x,
            y,
            show             
        }
    },
    methods: {
        myClick() {      
            console.log("clcik")      
            if(this.dom && this.dom.getBoundingClientRect){
                var rect = this.dom.getBoundingClientRect()
                this.x = rect.left
                this.y = rect.bottom       
                this.show = true                 
            }          
        },       
        myEvent() {
            console.log("leve")     
            let that = this       
            let timer = setTimeout(()=>{
                that.show = false
            }, 1000)
            
        }
    }
 }
</script>
<style lang="scss" scoped>
.dl-menuwrapper {
	position: relative;	
}
</style>